import React, {
  FC,
  useEffect,
  useState,
} from 'react';

import {
  Button,
  Pagination,
} from 'antd';
import {
  ArticleModelState,
  IRouteComponentProps,
  useDispatch,
  useSelector,
} from 'umi';

import { IPageItem } from '@/types';

import styles from './page.less';

const map: { [key: string]: string } = {
  'msgboard': '2c1794cc-10d8-4d48-adda-7ff02371aee8',
  'about': '8f3973e9-4ed4-4849-ad85-b7d3b8093623'
};

const Page: FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const path = match.params.id;
  const id = map[path];
  const dispatch = useDispatch();
  const { pageItem, pageCommentList, recommedArticleList } = useSelector((state: { article: ArticleModelState, page: IPageItem }) => ({ ...state.article, ...state.page }))
  useEffect(() => {
    // 获取页面详情
    dispatch({
      type: 'page/getPageViews',
      payload: id
    })
    // 获取评论列表
    dispatch({
      type: 'page/getPageComment',
      payload: id,
    })
    // 获取推荐列表
    dispatch({
      type: 'page/getArticleRecommend'
    })
  }, [])

  const [ONvalue, setONvalue] = useState("")
  function change(e: any) {
    console.log(e.target.value)
    setONvalue(e.target.value);
  }
  function fn() {
    console.log(ONvalue)
  }
  return <div>
    <div className={styles.Board}> <div dangerouslySetInnerHTML={{ __html: pageItem.content }} className="Boardcontent"></div></div>
    <div className={styles.pagewrap}>
      <div className={styles.pagearea}>
        <textarea placeholder="请输入评论内容" className={styles.pagetextarea} onChange={change}></textarea>
        <footer className={styles.pageareafooter}>
          <div>表情</div>
          <div><Button onClick={fn}>发布</Button></div>
        </footer>
      </div>
      <div>
        <div>
          {/* 评论 */}
          <div><p className={styles.pagecomment}>评论</p></div>
          {pageCommentList.map((item: any) => {
            return <div className={styles.pagecontent} key={item.id}>
              <h3>{item.name}</h3>
              <p>{item.content}</p>
              <p>{item.userAgent}</p>
            </div>
          })}
          <div className={styles.pagePagination}><Pagination size="small" total={pageCommentList.length} /></div>
          {/* 推荐阅读 */}
          <div><p className={styles.pageread}>推荐阅读</p></div>
          {recommedArticleList.map((item: any) => {
            return <div className={styles.pagereads} key={item.id}>
              <p><strong>{item.title}</strong> {item.createAt}</p>
              <div className={styles.pagerecommend}>
                <div><img src={item.cover} alt="" className={styles.pageimgs} /></div>
                <div>
                  <div>{item.summary}</div>
                  <div className={styles.pageshare}><span>{item.likes}</span><span>{item.views}</span></div>
                </div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
          })}
        </div>
      </div>
    </div>
  </div>
}

export default Page;
